import React, {Component} from 'react'
import './index.less'
import PropTypes from 'prop-types'

export default class Cover extends Component {
  constructor (props) {
    super(props)
    this.touchMove = this.touchMove.bind(this)
  }

  componentWillUnmount () {
    document.removeEventListener('touchmove', this.touchMove, false)
  }

  touchMove = e => {
    e.preventDefault()
  }

  shouldComponentUpdate (nextProps, nextState) {
    if (this.props.visible !== nextProps.visible) {
      if (nextProps.visible) {
        document.addEventListener('touchmove', this.touchMove, false)
      } else {
        document.removeEventListener('touchmove', this.touchMove, false)
      }
    }
    return true
  }

  render () {
    if (this.props.visible) {
      return (
        <div className='collection-box' style={this.props.style || []}>
          <div className='collection-btn'>
            {this.props.children && this.props.children}
          </div>
        </div>
      )
    } else {
      return <div />
    }
  }
}

Cover.defaultProps = {
  visible: false
}

Cover.propTypes = {
  visible: PropTypes.bool
}
